.pok-prpup-video {
	width: 100%;
	height: 100%;
	background: rgba(94, 108, 157, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: no-drop;
	z-index: 200;
	.video-js {
		width: 100%;
		height: 100%;
		background-color: #fff;
		.vjs-play-progress {
			background-color: #4c78fc;
			display: block;
			border-radius: 8px !important;
		}
		.vjs-progress {
			background-color: #4c78fc;
		}
		.vjs-progress-control {
		}
		.vjs-remaining-time {
			background-color: #4c78fc;
			display: none;
		}
		.vjs-fullscreen-control {
			background-color: #4c78fc;
			display: none;
		}
		.vjs-mute-control {
			background-color: #4c78fc;
			display: none;
		}
		.vjs-play-control {
			background-color: #4c78fc;
			display: none;
		}
		.vjs-poster {
			background-repeat: no-repeat;
			background-size: 100% 100%;
			width: 100%;
			border-radius: 8px;
		}
		.vjs-control-bar {
			bottom: -30px;
			background: none;
			width: calc(100% + 54px);
			left: -27px;
		}
		.vjs-slider-horizontal {
			border-radius: 8px;
		}
		.vjs-slider-bar {
			font-size: 14px;
			color: #4c78fc;
		}
		.vjs-load-progress {
			border-radius: 8px;
			div {
				border-radius: 8px;
			}
			.vjs-control-text {
				border-radius: 8px;
			}
		}
		.vjs-progress-holder {
			height: 5px;
			// overflow: hidden;
		}
		.vjs-picture-in-picture-control {
			color: #4c78fc;
			border-radius: 8px;
			display: none;
		}
	}
	.vjs-big-play-button {
		width: 80px !important;
		height: 80px !important;
		border-radius: 50% !important;
		background: #4c78fc !important;
		border: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		display: none;
		.vjs-icon-placeholder:before {
			top: 16px !important;
			left: 22px !important;
			border-radius: 4px;
			content: ' ' !important;
			height: 0;
			border-bottom: 25px solid transparent;
			border-top: 25px solid transparent;
			border-left: 50px solid #fff;
			width: 0 !important;
			height: 0 !important;
		}
	}
	&-header {
		width: 100%;
		height: 40px;
		background: #4c78fc;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		align-items: center;
		padding: 0 20px;
		justify-content: space-between;
		&-left {
			display: flex;
			span {
				width: 10px;
				height: 10px;
				left: 0px;
				top: 0px;
				background: #dee0e3;
				flex: none;
				order: 0;
				flex-grow: 0;
				margin-right: 10px;
				border-radius: 50%;
			}
			span:nth-child(2) {
				opacity: 0.5;
			}
		}
		&-center {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 18px;
			color: #ffffff;
		}
		&-close {
			font-size: 18px;
			color: #ffffff;
			cursor: pointer;
		}
	}

	&-footer {
		width: 100%;
		height: 40px;
		background: #ffffff;
		box-shadow: 0px -3px 6px rgba(212, 214, 234, 0.3);
		border-radius: 0px 0px 10px 10px;
		display: flex;
		padding: 0 20px;
		justify-content: space-between;
		align-items: center;
		&-left {
			font-size: 24px;
			color: #d1d7de;
			display: flex;
			align-items: center;
		}
		&-right {
			font-size: 18px;
			color: #8f959e;
			display: flex;
			align-items: center;
			justify-content: space-around;
			span {
				margin-left: 23px;
			}
		}
		&-time {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			color: #646a73;
			margin-left: 8px;
		}
	}
	&-play-content {
		position: relative;
		width: 100%;
		margin: 20px;
	}
	&-play-container {
		height: 100%;
		width: 100%;
	}
	&-play-title {
		position: fixed;
		top: 5px;
		height: 40px;
		left: -1px;
		top: -2px;
		background: #4c78fc;
		border-radius: 10px 10px 0px 0px;
	}
	&-play-button {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background: linear-gradient(
				0deg,
				rgba(255, 255, 255, 0.7),
				rgba(255, 255, 255, 0.7)
			),
			url('../../../assets//images/Rectangle.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		div {
			width: 80px;
			height: 80px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #4c78fc;
			font-size: 40px;
		}
	}
	&-content {
		width: 55%;
		position: relative;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		background: #fff url('../../../assets//images/Rectangle.png') no-repeat
			center center;
		background-size: calc(100% - 44px) calc(100% - 122px);
		cursor: default;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		transition: height 0.3s;
		-webkit-transition: height 0.3s;
	}
	&-close {
		position: absolute;
		right: -15px;
		top: -40px;
		padding: 5px;
		background: cadetblue;
		color: #fff;
		border-radius: 50%;
		cursor: pointer;
	}
	&-default_avatar {
		position: absolute;
		transition: all 0.3s ease-out;
		color: rgb(255, 255, 255);
	}
}
